import { Card, Select, Tag } from 'antd';

type Slot = { dayOfWeek: number; start: string; end: string };
type TCourse = { id: string; name: string; credit: number; timeSlots: Slot[] };

const mockTaught: TCourse[] = [
  { id: 't-1', name: '数据结构与算法', credit: 3, timeSlots: [{ dayOfWeek: 1, start: '14:00', end: '16:00' }] },
  { id: 't-2', name: '编译原理', credit: 4, timeSlots: [{ dayOfWeek: 3, start: '09:00', end: '11:00' }] },
];

const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const periods = ['1-2节', '3-4节', '5-6节', '7-8节', '9-10节'];

function timeToPeriod(start: string): number {
  // 简单映射：08:00→1-2，10:00→3-4，14:00→5-6，16:00→7-8，19:00→9-10
  const [h, m] = start.split(':').map(Number);
  const minutes = h * 60 + m;
  if (minutes < 9 * 60) return 0; // 8:00
  if (minutes < 12 * 60) return 1; // 10:00-11:59
  if (minutes < 15 * 60) return 2; // 14:00-14:59
  if (minutes < 18 * 60) return 3; // 16:00-17:59
  return 4; // 19:00 之后
}

export default function TeacherHome() {
  const weeks = Array.from({ length: 20 }, (_, i) => i + 1);

  // 结构化成 day-period 二维映射
  const cellMap: Record<string, TCourse[]> = {};
  for (const c of mockTaught) {
    for (const s of c.timeSlots) {
      const p = timeToPeriod(s.start);
      const key = `${s.dayOfWeek}-${p}`;
      if (!cellMap[key]) cellMap[key] = [];
      cellMap[key].push(c);
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="text-lg font-semibold">课表</div>
        <div className="flex items-center gap-2">
          <span>第</span>
          <Select defaultValue={1} style={{ width: 96 }} options={weeks.map(w=>({value:w,label:String(w)}))} />
          <span>周</span>
        </div>
      </div>

      {/* 表头 */}
      <div className="grid" style={{ gridTemplateColumns: '120px repeat(7, 1fr)' }}>
        <div className="text-slate-500 text-sm py-2 px-3">时间</div>
        {days.map((d, i) => (
          <div key={i} className="text-slate-500 text-sm py-2 px-3 text-center">{d}</div>
        ))}
      </div>

      {/* 网格 */}
      <div className="border rounded-md overflow-hidden">
        {periods.map((label, rowIdx) => (
          <div key={rowIdx} className="grid border-b last:border-b-0" style={{ gridTemplateColumns: '120px repeat(7, 1fr)' }}>
            {/* 左侧时间段 */}
            <div className="py-6 px-3 text-slate-600 border-r bg-slate-50">{label}</div>
            {/* 每天的单元格 */}
            {Array.from({ length: 7 }, (_, colIdx) => {
              const day = colIdx + 1; // 1..7
              const key = `${day}-${rowIdx}`;
              const courses = cellMap[key] || [];
              return (
                <div key={colIdx} className="relative h-24 border-r last:border-r-0">
                  {courses.map(c => (
                    <div key={c.id} className="absolute left-2 right-2 top-2 bottom-2 rounded-md bg-indigo-50 border border-indigo-200 p-2 text-xs">
                      <div className="font-medium text-indigo-700 truncate">{c.name}</div>
                      <div className="text-slate-500 mt-1">{label} <Tag size="small">{`周${day}`}</Tag></div>
                    </div>
                  ))}
                </div>
              );
            })}
          </div>
        ))}
      </div>

      {/* 所教课程 */}
      <Card title="所教课程">
        <div className="grid md:grid-cols-3 gap-4">
          {mockTaught.map(c => (
            <Card key={c.id} size="small">
              <div className="font-medium mb-1">{c.name}</div>
              <div className="text-slate-500 text-sm mb-1">学分：{c.credit}</div>
              <div className="space-x-2">
                {c.timeSlots.map((s, i) => (
                  <Tag key={i}>{`周${s.dayOfWeek} ${s.start}-${s.end}`}</Tag>
                ))}
              </div>
            </Card>
          ))}
        </div>
      </Card>
    </div>
  );
}


